<template>
	<view class="order">
		<!-- 头部 -->
		<view class="order-header flex order-content">
			<!-- 左边图片 -->
			<image class="order-header-img" :src="orderHeader.imgUrl"></image>

			<!-- 右边的内容 -->
			<view class="order-right">
				<view class="order-title">{{ orderHeader.title }}</view>
				<view class="order-des">{{ orderHeader.des }}</view>
				<view class="order-price">￥{{ orderHeader.price }}/桌</view>
				<view class="order-count flex">
					<view class="subtract" @tap="subtract(orderHeader.count)">-</view>
					<view class="count">{{ orderHeader.count }}</view>
					<view class="add" @tap="add(orderHeader.count)">+</view>
				</view>
			</view>
		</view>

		<!-- 订金 -->
		<view class="deposit bg mt-30 order-content">
			<view class="deposit-title">坝坝宴预约:先付订金，尾款坝坝宴后当日内结清。</view>
			<view class="total">总价：{{ total }}</view>
			<view class="flex flex-align-items deposit-text">
				<view>订金：{{ deposit }}</view>
				<view>尾款：{{ wei }}</view>
			</view>
		</view>

		<!-- 表单 -->
		<view class="order-form order-content">
			
			<!-- 联系电话 -->
			<view class="tel flex">
				<label>联系电话</label>
				<input type="text" />
			</view>
			
			<!-- 时间 -->
			<view class="uni-list">
				<view class="uni-list-cell flex">
					<label>烹饪地点</label>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{ array[index] }}</view>
						</picker>
					</view>
				</view>
			</view>

			<!-- 地址 -->
			<view class="uni-list">
				<view class="uni-list-cell flex">
					<label>烹饪时间</label>
					<view class="uni-list-cell-db flex">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{ date }}</view>
						</picker>
						<picker class="ml-30" mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
							<view class="uni-input">{{ time }}</view>
						</picker>
					</view>
				</view>
			</view>
		
			<!-- 详细地址 -->
			<view class="address flex">
				<label>详细地址</label>
				<view class="uni-textarea">
				    <textarea placeholder-style="color:#ccc" placeholder="例如:小区名/楼"/>
				</view> 
			</view>
		
		</view>
	
	
		<!-- 支付 -->
		<view class="pay flex flex-align-items">
			<view class="money">
				订金：{{total}}元
			</view>
			<view class="mybtn">
				支付
			</view>
		</view>
	
	
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			orderHeader: {
				imgUrl: '../../static/imgs/trip/25.png',
				title: '家庭法式海鲜盛宴大桌',
				des: '八菜一汤，特色甜点',
				price: '1420',
				count: 1
			},
			// 总价
			total: 0,
			deposit: 1200,
			wei: 500,

			// 表单
			title: 'picker',
			array: ['中国', '美国', '巴西', '日本'],
			index: 0,
			date: currentDate,
			time: '12:01'
		};
	},
	onLoad() {
		subtract();
		add();
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		subtract(i) {
			console.log(i);

			if (i <= 1) {
				console.log('亲，不能再减了');
			} else {
				this.orderHeader.count--;
				this.total = i - 1 * this.orderHeader.price;
			}
		},
		add(i) {
			console.log(i);
			this.orderHeader.count++;
			this.total = i * this.orderHeader.price;
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		},
		bindDateChange: function(e) {
			this.date = e.target.value;
		},
		bindTimeChange: function(e) {
			this.time = e.target.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	}
};
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
}

.flex-align-items {
	align-items: center;
}
.order-content {
	padding: 0 40rpx;
	box-sizing: border-box;
}
.bg {
	background-color: #efefef;
}
.mt-30 {
	margin-top: 30rpx;
}
.ml-30{
	margin-left: 30rpx;
}

// 订单
.order {
	// 头部
	.order-header {
		.order-header-img {
			width: 240rpx;
			height: auto;
			margin-right: 30rpx;
		}

		.order-right {
			.order-title {
				line-height: 2;
				font-size: 36rpx;
			}
			.order-des {
				font-size: 28rpx;
				color: #777;
				line-height: 2;
			}
			.order-price {
				font-size: 32rpx;
				color: #fb4800;
				line-height: 1.5;
			}
			.order-count {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.subtract,
				.add {
					width: 50rpx;
					height: 50rpx;
					border: 1px solid #ccc;
					border-radius: 25rpx;
					display: flex;
					line-height: 50rpx;
					align-items: center;
					justify-content: center;
					color: #777;
				}
				.add {
					background-color: #fb4800;
					color: #fff;
				}
				.count {
					margin: 0 20rpx;
				}
			}
		}
	}

	// 订金
	.deposit {
		padding: 30rpx 40rpx;
		.deposit-title,
		.deposit-text {
			color: #777;
			line-height: 2;
			font-size: 30rpx;
		}
		.total {
			font-size: 32rpx;
			color: #000;
		}
		.deposit-text view:nth-child(2) {
			margin-left: 30rpx;
		}
	}
	
	// 表单
	.order-form{
		padding: 40rpx 40rpx;
		.tel,.uni-list{
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1rpx solid #efefef;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			label{
				width: 150rpx;
			}
		}
		.address{
			line-height: 90rpx;
			// border-bottom: 1rpx solid #efefef;
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			label{
				width: 150rpx;
			}
		}
		
	}

	// 订金
	.pay{
		width: 100%;
		padding: 0 0 0 40rpx;
		box-sizing: border-box;
		height: 98rpx;
		border-top: 1rpx solid #efefef;
		position: fixed;
		bottom: 0;
		.money{
			height: 100%;
			font-size: 36rpx;
			color: #fa5113;
			flex: 3;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		.mybtn{
			height: 100%;
			flex: 2;
			background-color: #fa5113;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

}
</style>
